<template>
  <div class="mt-10">
    <div class="radio-inputs">
      <label v-for="(bucket, index) in buckets" :key="index">
        <input
          class="radio-input"
          type="radio"
          name="engine"
          :checked="index === 0"
          @change="selectBucket(bucket, region[index])"
        />
        <span class="radio-tile">
          <span class="radio-icon">
            <svg
              t="1713280442990"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5350"
              width="200"
              height="200"
            >
              <path
                d="M902.704031 103.832065c0-44.663504-36.549725-81.204847-81.209039-81.204847H202.500817C157.837312 22.627218 121.295969 59.168561 121.295969 103.832065v808.666337c0 44.663504 36.541343 81.204847 81.204848 81.204847h618.994175c44.659313 0 81.209038-36.541343 81.209039-81.204847V103.832065z"
                fill="#D0D0DB"
                p-id="5351"
              ></path>
              <path
                d="M167.396987 963.909419V155.243082c0-44.663504 36.541343-81.204847 81.204847-81.204847h618.994176c10.008112 0 19.567787 1.919479 28.444328 5.27228-11.609075-30.728424-41.293939-52.768901-75.94514-52.768902H201.105213c-44.663504 0-81.204847 36.541343-81.204848 81.204848v808.670527c0 34.659583 22.040478 64.336066 52.764711 75.928377A80.307973 80.307973 0 0 1 167.396987 963.909419z"
                fill="#FFFFFF"
                opacity=".15"
                p-id="5352"
              ></path>
              <path
                d="M822.894787 19.836011H203.900611c-44.663504 0-81.204847 36.541343-81.204847 81.204847v808.666337c0 44.663504 36.541343 81.204847 81.204847 81.204847h618.994176c44.659313 0 81.209038-36.541343 81.209039-81.204847V101.040858c0-44.663504-36.549725-81.204847-81.209039-81.204847z m19.743809 834.79304c0 41.143063-33.674698 74.817761-74.826143 74.817761H197.517716c-41.151445 0-74.817761-33.666316-74.817761-74.817761V109.577928c0-41.151445 33.666316-74.817761 74.817761-74.817761h570.30731c41.138872 0 74.821952 33.666316 74.821952 74.817761l-0.008382 745.051123z"
                fill="#6E6E96"
                opacity=".15"
                p-id="5353"
              ></path>
              <path
                d="M817.303991 1010.467256H198.309815C144.287804 1010.467256 100.340961 966.520413 100.340961 912.498402V103.832065C100.340961 49.810054 144.287804 5.863211 198.309815 5.863211h618.994176c54.022011 0 97.973045 43.946843 97.973045 97.968854v808.666337c0 54.022011-43.951034 97.968854-97.973045 97.968854zM198.309815 39.391224C162.774312 39.391224 133.868974 68.296562 133.868974 103.832065v808.666337c0 35.535503 28.905338 64.440841 64.440841 64.440841h618.994176c35.535503 0 64.445032-28.905338 64.445032-64.440841V103.832065c0-35.535503-28.909529-64.440841-64.445032-64.440841H198.309815z"
                fill="#6E6E96"
                p-id="5354"
              ></path>
              <path d="M300.423569 927.38484h433.102299v66.318409H300.423569z" fill="#8A8AA1" p-id="5355"></path>
              <path
                d="M733.525868 1010.467256H300.423569a16.764006 16.764006 0 0 1-16.764006-16.764007V927.38484a16.764006 16.764006 0 0 1 16.764006-16.764007h433.102299a16.764006 16.764006 0 0 1 16.764007 16.764007v66.318409a16.764006 16.764006 0 0 1-16.764007 16.764007z m-416.338292-33.528013h399.574286v-32.790397H317.187576v32.790397z"
                fill="#6E6E96"
                p-id="5356"
              ></path>
              <path
                d="M335.963263 946.323976h20.955008v47.379273h-20.955008zM385.65597 946.323976h20.955008v47.379273h-20.955008zM435.340294 946.323976h20.955008v47.379273h-20.955008zM485.037191 946.323976h20.955008v47.379273h-20.955008zM534.721515 946.323976h20.955008v47.379273h-20.955008zM584.418413 946.323976h20.955008v47.379273h-20.955008zM634.102737 946.323976h20.955008v47.379273h-20.955008zM683.799634 946.323976h20.955008v47.379273h-20.955008z"
                fill="#FFE599"
                p-id="5357"
              ></path>
              <path
                d="M217.031019 120.860105m-27.069679 0a27.069679 27.069679 0 1 0 54.139359 0 27.069679 27.069679 0 1 0-54.139359 0Z"
                fill="#ADADD1"
                p-id="5358"
              ></path>
              <path
                d="M217.031019 164.693791c-24.169506 0-43.833686-19.66418-43.833686-43.833686s19.66418-43.833686 43.833686-43.833686 43.833686 19.66418 43.833686 43.833686-19.66418 43.833686-43.833686 43.833686z m0-54.139359c-5.682998 0-10.305673 4.622675-10.305673 10.305673s4.622675 10.305673 10.305673 10.305673 10.305673-4.622675 10.305673-10.305673-4.622675-10.305673-10.305673-10.305673z"
                fill="#6E6E96"
                p-id="5359"
              ></path>
              <path
                d="M803.381483 120.860105m-27.065488 0a27.065488 27.065488 0 1 0 54.130977 0 27.065488 27.065488 0 1 0-54.130977 0Z"
                fill="#ADADD1"
                p-id="5360"
              ></path>
              <path
                d="M803.381483 164.6896c-24.169506 0-43.829495-19.659989-43.829495-43.829495s19.659989-43.829495 43.829495-43.829495 43.829495 19.659989 43.829495 43.829495-19.659989 43.829495-43.829495 43.829495z m0-54.130977c-5.678807 0-10.301482 4.622675-10.301482 10.301482s4.622675 10.301482 10.301482 10.301482 10.301482-4.622675 10.301482-10.301482-4.622675-10.301482-10.301482-10.301482z"
                fill="#6E6E96"
                p-id="5361"
              ></path>
              <path
                d="M803.377292 890.839305m-27.065488 0a27.065488 27.065488 0 1 0 54.130977 0 27.065488 27.065488 0 1 0-54.130977 0Z"
                fill="#ADADD1"
                p-id="5362"
              ></path>
              <path
                d="M803.377292 934.6688c-24.169506 0-43.829495-19.659989-43.829495-43.829495s19.659989-43.829495 43.829495-43.829495 43.829495 19.659989 43.829495 43.829495-19.659989 43.829495-43.829495 43.829495z m0-54.130977c-5.678807 0-10.301482 4.622675-10.301482 10.301482s4.622675 10.301482 10.301482 10.301482 10.301482-4.622675 10.301482-10.301482-4.622675-10.301482-10.301482-10.301482z"
                fill="#6E6E96"
                p-id="5363"
              ></path>
              <path
                d="M217.031019 890.839305m-27.065488 0a27.065488 27.065488 0 1 0 54.130977 0 27.065488 27.065488 0 1 0-54.130977 0Z"
                fill="#ADADD1"
                p-id="5364"
              ></path>
              <path
                d="M217.031019 934.6688c-24.169506 0-43.829495-19.659989-43.829495-43.829495s19.659989-43.829495 43.829495-43.829495 43.829495 19.659989 43.829495 43.829495-19.66418 43.829495-43.829495 43.829495z m0-54.130977c-5.678807 0-10.301482 4.622675-10.301482 10.301482s4.622675 10.301482 10.301482 10.301482 10.301482-4.622675 10.301482-10.301482-4.622675-10.301482-10.301482-10.301482z"
                fill="#6E6E96"
                p-id="5365"
              ></path>
              <path
                d="M521.037895 762.11269c-143.575334 0-260.38274-116.811597-260.38274-260.395312a16.764006 16.764006 0 0 1 33.528013 0c0 125.097207 101.765901 226.8673 226.854727 226.867299s226.854727-101.770092 226.854727-226.867299c0-125.088825-101.765901-226.850536-226.854727-226.850536a16.764006 16.764006 0 0 1 0-33.528013c143.575334 0 260.38274 116.807406 260.38274 260.378549 0 143.583716-116.807406 260.395313-260.38274 260.395312z"
                fill="#6E6E96"
                opacity=".44"
                p-id="5366"
              ></path>
              <path
                d="M521.033704 501.72576m-83.916426 0a83.916426 83.916426 0 1 0 167.832852 0 83.916426 83.916426 0 1 0-167.832852 0Z"
                fill="#A9A9BA"
                p-id="5367"
              ></path>
              <path
                d="M521.033704 602.406192c-55.514008 0-100.680432-45.162234-100.680432-100.676241 0-55.518199 45.166425-100.680432 100.680432-100.680433s100.676241 45.166425 100.676241 100.680433c0 55.509817-45.162234 100.676241-100.676241 100.676241z m0-167.832852c-37.027499 0-67.152419 30.12492-67.152419 67.15242s30.12492 67.148228 67.152419 67.148228 67.148228-30.12492 67.148228-67.148228c0-37.027499-30.120729-67.152419-67.148228-67.15242z"
                fill="#6E6E96"
                p-id="5368"
              ></path>
              <path
                d="M300.423569 927.38484h433.102299v37.245431H300.423569z"
                fill="#6E6E96"
                opacity=".25"
                p-id="5369"
              ></path>
            </svg>
          </span>
          <div class="radio-label w-full">{{ bucket.split('-')[0] }}</div>
        </span>
      </label>
      <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadAction">
        <label>
          <span class="radio2-tile">
            <span class="radio2-icon">
              <el-progress type="circle" :percentage="up" v-show="up != 1" width="50" />
              <svg
                t="1713193191745"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="36459"
                width="15"
                height="15"
              >
                <path
                  d="M465.07776 170.88a348.757333 348.757333 0 0 0-126.848 46.506667l-9.728 5.674666c-7.253333 4.693333-14.293333 9.813333-20.992 15.36A302.890667 302.890667 0 0 0 221.067093 346.282667c-9.045333 19.584-16.213333 39.936-21.461333 60.885333-3.072 10.709333-7.168 15.36-13.312 15.36a334.08 334.08 0 0 0-83.882667 33.706667 387.712 387.712 0 0 0-51.157333 41.941333 212.778667 212.778667 0 0 0-51.157333 143.232 208.170667 208.170667 0 0 0 68.565333 157.568 227.626667 227.626667 0 0 0 96.128 55.722667c40.448 10.752 28.672 10.24 345.301333 10.24 266.453333 0 293.546667 0 311.466667-3.072a334.848 334.848 0 0 0 57.813333-14.805334l9.728-4.608a264.362667 264.362667 0 0 0 47.573334-29.184 221.994667 221.994667 0 0 0 86.442666-172.373333 261.546667 261.546667 0 0 0-13.312-73.130667 27.008 27.008 0 0 1-3.072-8.192 198.826667 198.826667 0 0 0-19.925333-37.333333l-9.728-12.288a167.253333 167.253333 0 0 0-38.4-38.357333 173.525333 173.525333 0 0 0-42.922667-28.16l-9.216-4.053334a493.226667 493.226667 0 0 0-51.157333-17.408 357.034667 357.034667 0 0 0-37.845333-3.072 216.32 216.32 0 0 0-76.714667 7.68l-20.992 7.168a238.933333 238.933333 0 0 0-51.157333 26.069334 1381.290667 1381.290667 0 0 0-108.416 92.586666 23644.928 23644.928 0 0 1-192.341334 175.957334l-37.333333 34.773333-16.896 16.384H259.467093c-18.901333 0-42.453333 0-51.157333-4.096a138.112 138.112 0 0 1-112-97.194667 185.258667 185.258667 0 0 1 0-66.986666c8.533333-27.989333 25.088-52.906667 47.573333-71.637334a168.277333 168.277333 0 0 1 93.610667-33.237333 179.541333 179.541333 0 0 1 114.048 51.2l45.013333 37.802667c4.48 4.565333 9.685333 8.362667 15.36 11.264 3.584 0 11.776-6.656 40.917334-33.28 9.130667-7.893333 17.493333-16.64 25.045333-26.026667a109.013333 109.013333 0 0 0-17.365333-19.456l-23.552-19.456c-3.584-4.096-40.405333-32.213333-59.306667-46.037333a255.658667 255.658667 0 0 0-63.957333-31.701334 70.485333 70.485333 0 0 1-18.901334-8.704c3.882667-17.706667 9.898667-34.858667 17.92-51.157333a238.848 238.848 0 0 1 51.114667-63.914667 215.893333 215.893333 0 0 1 83.882667-43.989333l19.968-2.048a172.928 172.928 0 0 1 43.946666-4.096c17.194667-1.194667 34.432 0.170667 51.2 4.096 35.285333 7.381333 68.266667 23.168 96.128 46.037333 18.474667 16.213333 34.346667 35.2 47.061334 56.234667 3.114667 5.333333 6.528 10.453333 10.24 15.36 4.906667 0.597333 9.898667 0.597333 14.805333 0 14.933333-2.261333 29.952-3.626667 45.013333-4.096 35.84 0 36.864 0 29.184-15.36a123.392 123.392 0 0 1-6.656-14.805333 75.392 75.392 0 0 0-7.168-14.848 82.389333 82.389333 0 0 1-5.632-9.685334 363.648 363.648 0 0 0-40.405333-51.2 319.488 319.488 0 0 0-90.026667-63.914666l-23.04-10.752a354.389333 354.389333 0 0 0-167.765333-19.968l0.554667-3.029334z m349.866667 338.602667c31.317333 5.546667 59.818667 21.589333 80.810666 45.525333 21.973333 22.485333 33.792 52.992 32.725334 84.394667 1.834667 13.653333 0.256 27.52-4.608 40.405333A124.8 124.8 0 0 1 899.89376 725.333333c-19.925333 23.210667-46.549333 39.68-76.245333 47.061334a406.144 406.144 0 0 1-41.941334 4.608h-347.306666c15.232-16.64 31.488-32.341333 48.64-47.061334l62.378666-59.818666c21.973333-20.48 106.88-97.706667 119.168-107.946667l12.8-11.776a245.76 245.76 0 0 1 42.965334-29.141333c8.405333-4.096 17.109333-7.509333 26.069333-10.24l17.408-5.12c16.981333-2.176 34.133333-2.176 51.157333 0v3.584z"
                  fill="#1F6EFF"
                  p-id="36460"
                ></path>
              </svg>
            </span>
            <div class="radio2-label w-full">上传</div>
          </span>
        </label>
      </el-upload>
      <!-- <label @click="drawer = true">
        <span class="radio3-tile">
          <span class="radio3-icon">
            <svg t="1710588817816" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="2480" width="200" height="200">
              <path
                d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m249.344 776.192c-5.632 1.536-7.68 3.584-9.728 8.704-30.208 81.408-109.568 136.192-202.752 135.68-53.76-1.024-103.936-22.016-144.896-64.512-4.096-4.096-7.168-3.584-11.776-2.56-103.424 16.896-200.192-39.936-234.496-137.728-14.336-40.96-14.848-81.92-2.048-123.392 1.536-4.608 1.024-7.168-2.048-10.752-100.352-116.736-40.96-296.96 109.568-333.312 5.12-1.024 7.68-3.584 9.216-8.192 30.72-84.48 114.688-139.776 205.824-135.68 55.808 2.56 103.424 23.552 142.336 63.488 3.584 3.584 6.656 4.096 10.752 3.072 99.84-16.384 193.536 34.816 231.424 126.976 17.92 43.52 19.456 88.064 6.656 133.12-1.536 5.12-1.024 8.704 2.56 12.8 98.816 116.224 39.424 295.424-110.592 332.288z"
                fill="#059469" p-id="2481"></path>
              <path
                d="M870.912 443.392c-3.584-4.096-4.096-7.68-2.56-12.8 13.312-45.056 11.264-89.6-6.656-133.12-37.888-92.16-131.584-143.36-231.424-126.976-4.608 0.512-7.68 0-10.752-3.072-38.912-39.936-86.016-60.928-142.336-63.488-90.624-4.096-174.592 51.2-205.824 135.68-1.536 4.608-4.096 7.168-9.216 8.192-150.016 36.352-208.896 216.576-108.544 333.312 3.072 3.584 3.584 6.656 2.048 10.752-12.8 41.472-12.288 82.432 2.048 123.392 34.304 97.792 131.072 154.112 234.496 137.728 4.096-0.512 7.68-1.536 11.776 2.56 40.96 42.496 91.648 63.488 144.896 64.512 93.184 0.512 172.544-54.272 202.752-135.68 2.048-5.12 4.096-7.68 9.728-8.704 150.016-36.352 209.408-215.552 109.568-332.288z m-51.2-98.816c3.584 15.872 3.584 32.256 2.048 48.64-0.512 5.12-1.536 6.656-7.168 3.584-51.712-30.208-103.936-59.392-155.648-89.6-14.848-8.704-27.648-9.216-43.008-0.512-58.368 34.304-117.76 67.584-176.64 100.864-2.56 1.536-5.12 3.072-8.704 4.608 0-3.072-0.512-4.608-0.512-6.144V337.408c0-4.096 1.024-6.656 5.12-8.704 51.712-29.184 103.424-59.392 155.136-88.576 93.696-50.688 207.36 1.024 229.376 104.448z m-226.304 166.912v40.96c0 4.096-1.024 6.656-4.608 8.704-24.064 13.312-48.128 27.136-72.192 40.96-3.072 2.048-5.632 2.048-9.216 0-23.552-13.824-47.616-27.136-71.168-40.96-4.096-2.56-5.632-5.12-5.632-9.728V471.552c0-4.608 1.536-7.168 5.12-9.216 24.064-13.312 47.616-27.136 71.168-40.96 3.584-2.048 6.144-2.048 9.216 0 24.064 13.824 48.128 27.648 72.192 40.96 3.584 2.048 5.12 4.608 5.12 8.704v40.448z m-279.552-199.68C314.368 235.52 365.056 174.08 440.32 159.744c47.104-8.704 89.6 3.072 128 32.768-26.112 14.848-50.688 28.672-75.776 43.008-30.72 17.408-60.928 34.816-91.648 52.224-11.264 6.144-16.384 15.36-16.384 27.648v208.384c0 8.704 0 8.704-7.68 4.608-19.456-10.752-38.4-22.016-57.856-32.768-4.096-2.56-5.632-5.12-5.632-9.728 0.512-58.368 0-116.224 0.512-174.08zM158.72 440.32c3.072-61.952 35.84-106.496 92.672-132.608 7.68-3.584 8.192-3.584 8.192 5.12v179.2c0 14.848 6.144 24.576 18.944 31.744 60.416 33.792 120.832 68.608 181.248 102.912 1.536 1.024 3.584 2.048 6.656 4.096-23.552 13.312-45.568 26.112-68.096 38.912-2.56 1.536-4.608 0.512-7.168-0.512-53.248-30.208-107.008-59.392-159.232-91.136-51.2-31.232-76.288-78.336-73.216-137.728z m68.608 293.888c-20.992-31.232-29.184-66.048-24.576-103.424 0.512-6.144 2.56-5.632 7.168-3.072 52.736 30.208 105.472 59.904 158.208 90.624 13.312 7.68 25.088 7.68 38.4 0 59.904-34.304 119.808-68.608 179.712-102.4 7.68-4.096 7.68-4.096 7.68 4.608v66.56c0 3.584-1.024 6.144-4.608 8.192-52.224 29.696-103.936 59.392-156.16 88.576-72.704 38.4-161.28 17.408-205.824-49.664z m483.328-102.912v84.992c-0.512 84.992-72.704 153.088-158.72 150.528-33.28-1.024-62.976-11.264-89.6-30.72-6.144-4.608-6.144-4.608 0.512-8.192 52.736-29.696 104.96-59.904 157.696-89.6 13.312-7.68 19.456-17.408 18.944-32.768-0.512-68.096 0-136.192 0-204.288 0-9.216 0-9.216 8.192-4.608 18.432 10.752 37.376 21.504 55.808 31.744 4.608 2.56 6.656 5.632 6.656 11.264 0 30.208 0.512 60.928 0.512 91.648z m139.264 12.288c-16.384 33.792-42.496 57.344-76.8 72.192-8.192 3.584-8.192 3.584-8.192-5.632 0-59.392-0.512-119.296 0-178.688 0-15.36-5.632-25.088-18.944-32.256-59.904-33.28-119.296-67.584-178.688-101.376-2.56-1.536-5.12-3.072-8.704-5.12 20.48-11.776 39.424-22.016 58.368-33.28 9.216-5.632 15.872-5.632 25.088 0 47.104 27.648 94.208 54.272 141.824 80.896 47.616 26.624 75.776 66.56 81.92 120.832 2.56 28.16-3.072 55.808-15.872 82.432z"
                fill="#ffffff" p-id="2482" data-spm-anchor-id="a313x.search_index.0.i3.46fd3a814FaYM5" class="selected">
              </path>
              <path
                d="M430.592 338.432v68.608c0 1.536 0 3.072 0.512 6.144 3.584-2.048 6.144-3.584 8.704-4.608 58.88-33.792 117.76-66.56 176.64-100.864 15.36-8.704 27.648-8.192 43.008 0.512 51.712 30.208 103.936 59.392 155.648 89.088 5.12 3.072 6.144 1.536 7.168-3.584 1.536-16.384 1.536-32.768-2.048-48.64-22.016-103.424-135.68-155.136-228.864-103.424-52.736 28.672-103.936 58.368-156.16 88.064-3.584 2.048-4.608 4.608-4.608 8.704z"
                fill="#059469" p-id="2483"></path>
              <path
                d="M313.344 485.376c0 4.608 1.536 7.168 5.632 9.728 19.456 10.752 38.4 22.016 57.856 32.768 7.68 4.608 7.68 4.096 7.68-4.608V314.88c0-12.288 5.12-21.504 16.384-27.648 30.72-17.408 60.928-34.816 91.648-52.224 24.576-14.336 49.664-28.16 75.776-43.008-38.4-29.696-80.896-41.472-128-32.768-74.752 13.824-125.952 75.776-126.464 152.064-0.512 58.368 0 116.224-0.512 174.08z"
                fill="#059469" p-id="2484"></path>
              <path
                d="M390.656 669.184c2.048 1.536 4.096 2.048 7.168 0.512 22.528-12.8 44.544-25.6 68.096-38.912-3.072-1.536-4.608-3.072-6.656-4.096-60.416-34.304-120.32-68.608-181.248-102.912-12.8-7.168-18.944-16.896-18.944-31.744 0.512-59.904 0-119.296 0-179.2 0-8.704 0-8.704-8.192-5.12C194.56 334.336 161.792 378.368 158.72 440.32c-3.072 58.88 22.016 105.984 72.704 137.216 52.224 32.256 105.984 60.928 159.232 91.648zM588.288 462.336c-24.064-13.312-48.128-27.136-72.192-40.96-3.584-2.048-6.144-2.048-9.216 0-23.552 13.824-47.616 27.136-71.168 40.96-4.096 2.048-5.12 4.608-5.12 9.216v79.872c0 4.608 1.536 7.168 5.632 9.728 24.064 13.312 47.616 27.136 71.168 40.96 3.584 2.048 6.144 1.536 9.216 0 24.064-13.824 48.128-27.648 72.192-40.96 3.584-2.048 4.608-4.608 4.608-8.704v-40.96-39.936c0-4.608-1.024-7.168-5.12-9.216z"
                fill="#059469" p-id="2485"></path>
              <path
                d="M593.408 686.08v-66.56c0-8.704 0-8.704-7.68-4.608-59.904 34.304-119.808 68.096-179.712 102.4-13.312 7.68-25.088 8.192-38.4 0l-158.208-90.624c-4.608-2.56-6.144-3.072-7.168 3.072-4.608 37.376 3.584 72.192 24.576 103.424 45.056 67.072 133.632 88.064 205.824 48.64 52.224-28.672 103.936-58.88 156.16-88.576 3.584-1.024 4.608-3.584 4.608-7.168z"
                fill="#059469" p-id="2486"></path>
              <path
                d="M704 528.384c-18.944-10.24-37.376-20.992-55.808-31.744-8.192-4.608-8.192-4.608-8.192 4.608 0 68.096-0.512 136.192 0 204.288 0 15.36-5.632 25.088-18.944 32.768-52.736 29.696-105.472 59.392-157.696 89.6-6.656 3.584-6.656 3.584-0.512 8.192 26.624 19.456 56.32 29.696 89.6 30.72 86.016 2.56 158.208-65.536 158.72-150.528v-84.992-91.648c-0.512-5.632-2.56-8.704-7.168-11.264z"
                fill="#059469" p-id="2487" data-spm-anchor-id="a313x.search_index.0.i2.46fd3a814FaYM5" class=""></path>
              <path
                d="M783.36 439.808c-47.616-26.624-94.72-53.248-141.824-80.896-9.216-5.632-15.872-5.632-25.088 0-18.432 11.776-37.888 22.016-58.368 33.28 3.584 2.048 6.144 3.584 8.704 5.12 59.392 33.792 118.784 68.096 178.688 101.376 13.312 7.68 18.944 17.408 18.944 32.256-0.512 59.392 0 118.784 0 178.688 0 9.216 0 9.216 8.192 5.632 34.304-14.848 60.416-38.912 76.8-72.192 12.8-26.112 18.944-53.76 15.36-82.944-5.632-53.76-33.792-93.184-81.408-120.32z"
                fill="#059469" p-id="2488"></path>
            </svg>
          </span>
          <div class="radio3-label w-full">ChatGPT</div>
        </span>
      </label> -->
    </div>

    <div class="mt-4">
      <div
        class="card"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.8)"
      >
        <div class="card-des" style="padding: 0 5vw; margin: 0 auto; overflow-y: auto; text-align: center">
          <div class="my-2">
            <el-input
              v-model="input3"
              style="max-width: 600px"
              placeholder="Please input"
              class="input-with-select"
              @keydown.enter="filterKeysByKeyword()"
            >
              <template #append>
                <el-button>
                  <svg
                    t="1713193191745"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="36459"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M465.07776 170.88a348.757333 348.757333 0 0 0-126.848 46.506667l-9.728 5.674666c-7.253333 4.693333-14.293333 9.813333-20.992 15.36A302.890667 302.890667 0 0 0 221.067093 346.282667c-9.045333 19.584-16.213333 39.936-21.461333 60.885333-3.072 10.709333-7.168 15.36-13.312 15.36a334.08 334.08 0 0 0-83.882667 33.706667 387.712 387.712 0 0 0-51.157333 41.941333 212.778667 212.778667 0 0 0-51.157333 143.232 208.170667 208.170667 0 0 0 68.565333 157.568 227.626667 227.626667 0 0 0 96.128 55.722667c40.448 10.752 28.672 10.24 345.301333 10.24 266.453333 0 293.546667 0 311.466667-3.072a334.848 334.848 0 0 0 57.813333-14.805334l9.728-4.608a264.362667 264.362667 0 0 0 47.573334-29.184 221.994667 221.994667 0 0 0 86.442666-172.373333 261.546667 261.546667 0 0 0-13.312-73.130667 27.008 27.008 0 0 1-3.072-8.192 198.826667 198.826667 0 0 0-19.925333-37.333333l-9.728-12.288a167.253333 167.253333 0 0 0-38.4-38.357333 173.525333 173.525333 0 0 0-42.922667-28.16l-9.216-4.053334a493.226667 493.226667 0 0 0-51.157333-17.408 357.034667 357.034667 0 0 0-37.845333-3.072 216.32 216.32 0 0 0-76.714667 7.68l-20.992 7.168a238.933333 238.933333 0 0 0-51.157333 26.069334 1381.290667 1381.290667 0 0 0-108.416 92.586666 23644.928 23644.928 0 0 1-192.341334 175.957334l-37.333333 34.773333-16.896 16.384H259.467093c-18.901333 0-42.453333 0-51.157333-4.096a138.112 138.112 0 0 1-112-97.194667 185.258667 185.258667 0 0 1 0-66.986666c8.533333-27.989333 25.088-52.906667 47.573333-71.637334a168.277333 168.277333 0 0 1 93.610667-33.237333 179.541333 179.541333 0 0 1 114.048 51.2l45.013333 37.802667c4.48 4.565333 9.685333 8.362667 15.36 11.264 3.584 0 11.776-6.656 40.917334-33.28 9.130667-7.893333 17.493333-16.64 25.045333-26.026667a109.013333 109.013333 0 0 0-17.365333-19.456l-23.552-19.456c-3.584-4.096-40.405333-32.213333-59.306667-46.037333a255.658667 255.658667 0 0 0-63.957333-31.701334 70.485333 70.485333 0 0 1-18.901334-8.704c3.882667-17.706667 9.898667-34.858667 17.92-51.157333a238.848 238.848 0 0 1 51.114667-63.914667 215.893333 215.893333 0 0 1 83.882667-43.989333l19.968-2.048a172.928 172.928 0 0 1 43.946666-4.096c17.194667-1.194667 34.432 0.170667 51.2 4.096 35.285333 7.381333 68.266667 23.168 96.128 46.037333 18.474667 16.213333 34.346667 35.2 47.061334 56.234667 3.114667 5.333333 6.528 10.453333 10.24 15.36 4.906667 0.597333 9.898667 0.597333 14.805333 0 14.933333-2.261333 29.952-3.626667 45.013333-4.096 35.84 0 36.864 0 29.184-15.36a123.392 123.392 0 0 1-6.656-14.805333 75.392 75.392 0 0 0-7.168-14.848 82.389333 82.389333 0 0 1-5.632-9.685334 363.648 363.648 0 0 0-40.405333-51.2 319.488 319.488 0 0 0-90.026667-63.914666l-23.04-10.752a354.389333 354.389333 0 0 0-167.765333-19.968l0.554667-3.029334z m349.866667 338.602667c31.317333 5.546667 59.818667 21.589333 80.810666 45.525333 21.973333 22.485333 33.792 52.992 32.725334 84.394667 1.834667 13.653333 0.256 27.52-4.608 40.405333A124.8 124.8 0 0 1 899.89376 725.333333c-19.925333 23.210667-46.549333 39.68-76.245333 47.061334a406.144 406.144 0 0 1-41.941334 4.608h-347.306666c15.232-16.64 31.488-32.341333 48.64-47.061334l62.378666-59.818666c21.973333-20.48 106.88-97.706667 119.168-107.946667l12.8-11.776a245.76 245.76 0 0 1 42.965334-29.141333c8.405333-4.096 17.109333-7.509333 26.069333-10.24l17.408-5.12c16.981333-2.176 34.133333-2.176 51.157333 0v3.584z"
                      fill="#1F6EFF"
                      p-id="36460"
                    ></path>
                  </svg>
                </el-button>
              </template>
            </el-input>
          </div>
          <div class="notification" v-for="(file, index) in files" :key="index" :class="getCss(file.Key)">
            <div class="notiglow"></div>
            <div class="notiborderglow"></div>
            <div class="notititle truncate">{{ file.Key }}</div>
            <div class="notibody">
              <div class="my-1">{{ getFileType(file.Key) }}</div>
              <el-row>
                <el-col :span="8" class="text-center">
                  <svg
                    t="1710468956874"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    style="margin: 0 auto"
                    :class="getCss(file.Key) + 'svg'"
                    @click="p(file)"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="10555"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M676.517848 760.005179a192.521967 192.521967 0 0 0-33.672809-269.320685 216.679891 216.679891 0 0 0-284.210863 12.356994 192.213042 192.213042 0 0 0-7.228842 271.174234 216.247396 216.247396 0 0 0 283.469444 26.382183l78.775837 60.67284a30.892485 30.892485 0 0 0 42.013779-4.201377 27.556097 27.556097 0 0 0-4.386732-40.036661l-74.141965-57.336453zM213.315926 0.050046h597.275307a175.098606 175.098606 0 0 1 179.176414 170.650088V853.300484a175.098606 175.098606 0 0 1-179.176414 170.650088H213.315926A175.098606 175.098606 0 0 1 34.139512 853.300484V170.700134A175.098606 175.098606 0 0 1 213.315926 0.050046z m294.343598 784.978046a145.874315 145.874315 0 0 1-149.334273-142.105431 149.519628 149.519628 0 0 1 298.606761 0 145.874315 145.874315 0 0 1-149.272488 142.105431zM243.158067 238.972526a28.482871 28.482871 0 1 0 0 56.903957h537.52924a28.482871 28.482871 0 1 0 0-56.903957h-537.52924z"
                      p-id="10556"
                    ></path>
                  </svg>
                </el-col>
                <el-col :span="8" class="text-center">
                  <svg
                    t="1710468838257"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    style="margin: 0 auto"
                    :class="getCss(file.Key) + 'svg'"
                    @click="downloadFile(file)"
                    xmlns=" http://www.w3.org/2000/svg"
                    p-id="5463"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M512 22C241.38 22 22 241.38 22 512s219.38 490 490 490 490-219.38 490-490S782.62 22 512 22z m198.12 541.35l-173.9 173.91c-0.78 1-1.61 1.97-2.53 2.88-5.99 5.99-13.84 8.95-21.69 8.91-7.84 0.05-15.7-2.92-21.69-8.91-0.92-0.92-1.76-1.88-2.53-2.88l-173.9-173.9c-11.88-11.88-11.88-31.14 0-43.02 11.88-11.88 31.14-11.88 43.03 0L481.58 645V305.37c0-16.8 13.62-30.42 30.42-30.42 16.8 0 30.42 13.62 30.42 30.42V645L667.1 520.33c11.88-11.88 31.14-11.88 43.03 0 11.88 11.88 11.88 31.14-0.01 43.02z"
                      p-id="5464"
                      data-spm-anchor-id="a313x.search_index.0.i5.bd2e3a81qYIzvi"
                      class="selected"
                    ></path>
                  </svg>
                </el-col>
                <el-col :span="8" class="text-center">
                  <svg
                    t="1710468891929"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    style="margin: 0 auto"
                    :class="getCss(file.Key) + 'svg'"
                    @click="copyToClipboard(file)"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7749"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M904 848V147.968a27.968 27.968 0 0 0-27.968-27.968H176c0-30.912 25.088-56 56-56h672c30.976 0 56 25.088 56 56v672a56 56 0 0 1-56 56z m-56-616v672a56 56 0 0 1-56 56h-672A56 56 0 0 1 64 904v-672c0-30.912 25.024-56 56-56h672c30.912 0 56 25.088 56 56zM680 400h-448a27.968 27.968 0 0 0 0 55.936h448a27.968 27.968 0 1 0 0-55.936z m0 224h-448a28.032 28.032 0 0 0 0 56h448a27.968 27.968 0 1 0 0-56z"
                      p-id="7750"
                    ></path>
                  </svg>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" :title="fileObj.Key" width="1200" style="overflow: auto">
      <Preview :fileObj="fileObj" :ext="ext"></Preview>
    </el-dialog>
    <el-drawer v-model="drawer" size="40%">
      <ChatGPT></ChatGPT>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import COS from 'cos-js-sdk-v5';
import Preview from './Preview.vue';
import ChatGPT from './ChatGPT.vue';
import { useUserStore } from '@/stores/userinfo';
// 引入相关样式

const userStore = ref(useUserStore());
const cos = new COS({
  SecretId: import.meta.env.VITE_SecretId, // 推荐使用环境变量获取；用户的 SecretId，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
  SecretKey: import.meta.env.VITE_SecretKey, // 推荐使用环境变量获取；用户的 SecretKey，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
});
const drawer = ref(false);
const buckets = userStore.value.bucketList;
const { region } = userStore.value;
console.log('region', region);
const selectedBucket = ref('');
const selectedRegion = ref('');
const ext = ref('');
const input3 = ref('');
const fileObj = ref({});
const dialogTableVisible = ref(false);
const loading = ref(true);
const files = ref([]);
const up = ref(1);
selectedBucket.value = buckets[0].bucket;

const selectBucket = (bucketName, region) => {
  loading.value = true;
  selectedBucket.value = bucketName;
  selectedRegion.value = region;
  console.log('bucketName', bucketName);
  console.log('selectBucket', region);
  cos.getBucket(
    {
      Bucket: bucketName,
      Region: region,
    },
    (err, data) => {
      if (err) {
        console.error(err);
      } else {
        files.value = data.Contents.sort((a, b) => new Date(b.LastModified) - new Date(a.LastModified));
        console.log('files.value', files.value);
        loading.value = false;
      }
    },
  );
};
console.log('buckets[0].bucket', buckets[0]);
selectBucket(buckets[0], region[0]);
function filterKeysByKeyword() {
  if (input3.value === '') {
    selectBucket(selectedBucket.value, selectedRegion.value);
  } else {
    files.value = files.value.filter((file) => file.Key.toLowerCase().includes(input3.value.toLowerCase()));
  }
}
async function p(obj) {
  fileObj.value = obj;
  ext.value = getFileType(obj.Key);

  obj.url = `https://${selectedBucket.value}.cos.${selectedRegion.value}.myqcloud.com/${obj.Key}`;
  fileObj.value.content = '';
  if (
    obj.Key.toString().endsWith('.js') ||
    obj.Key.toString().endsWith('.css') ||
    obj.Key.toString().endsWith('.html') ||
    obj.Key.toString().endsWith('.json')
  ) {
    // fileObj.value.content = await f(obj.url, cos);

    cos.getObject(
      {
        Bucket: selectedBucket.value,
        Region: selectedRegion.value,
        Key: obj.Key,
      },
      (err, data) => {
        fileObj.value.content = data.Body;
        // console.log('fileObj.value.content', fileObj.value.content)
      },
    );
  }
  dialogTableVisible.value = true;
}
function downloadFile(obj) {
  obj.url = `https://${selectedBucket.value}.cos.${selectedRegion.value}.myqcloud.com/${obj.Key}`;

  const a = document.createElement('a');
  a.href = obj.url;
  a.download = 'filename.ext'; // 替换为你想要的文件名和扩展名
  a.click();
  console.log('url', obj.url);
  window.URL.revokeObjectURL(obj.url);
}
function copyToClipboard(obj) {
  obj.url = `https://${selectedBucket.value}.cos.${selectedRegion.value}.myqcloud.com/${obj.Key}`;
  const textToCopy = obj.url; // 替换为你要复制的字符串
  navigator.clipboard
    .writeText(textToCopy)
    .then(() => {
      console.log('已成功复制到剪贴板');
      ElMessage({
        message: '已成功复制到剪贴板.',
        type: 'success',
      });
    })
    .catch((error) => {
      console.error('复制到剪贴板时出错:', error);
    });
}
function getFileType(fileName) {
  const extension = fileName.split('.').pop().toLowerCase();
  let fileType = '';

  switch (extension) {
    case 'txt':
      fileType = '文本';
      break;
    case 'doc':
    case 'docx':
      fileType = 'Word';
      break;
    case 'xls':
    case 'xlsx':
      fileType = 'Excel';
      break;
    case 'ppt':
    case 'pptx':
      fileType = 'PowerPoint';
      break;
    case 'pdf':
      fileType = 'PDF';
      break;
    case 'mp3':
      fileType = '音频';
      break;
    case 'mp4':
    case 'mov':
    case 'avi':
      fileType = '视频';
      break;
    case 'jpg':
    case 'jpeg':
    case 'png':
      fileType = '图片';
      break;
    case 'js':
      fileType = 'JavaScript';
      break;
    case 'css':
      fileType = 'CSS';
      break;
    case 'json':
      fileType = 'JSON';
      break;
    case 'html':
      fileType = 'HTML';
      break;
    case 'svg':
      fileType = 'SVG';
      break;
    default:
      fileType = '未知文件类型';
      break;
  }

  return fileType;
}
function getCss(fileName) {
  const extension = fileName.split('.').pop().toLowerCase();
  let fileType = '';

  switch (extension) {
    case 'txt':
      fileType = 'yellow';
      break;
    case 'doc':
    case 'docx':
      fileType = 'blue';
      break;
    case 'xls':
    case 'xlsx':
      fileType = 'blue';
      break;
    case 'ppt':
    case 'pptx':
      fileType = 'blue';
      break;
    case 'pdf':
      fileType = 'yellow';
      break;
    case 'mp3':
      fileType = 'zi';
      break;
    case 'mp4':
    case 'mov':
    case 'avi':
      fileType = 'zi';
      break;
    case 'jpg':
    case 'jpeg':
    case 'png':
      fileType = 'red';
      break;
    case 'js':
      fileType = 'yellow';
      break;
    case 'css':
      fileType = 'yellow';
      break;
    case 'json':
      fileType = 'yellow';
      break;
    case 'html':
      fileType = 'yellow';
      break;
    case 'svg':
      fileType = 'green';
      break;
    default:
      fileType = 'red';
      break;
  }

  return fileType;
}
async function uploadAction(file) {
  console.log('file', file);
  const result = await cos.uploadFile({
    Bucket: selectedBucket.value,
    Region: selectedRegion.value,
    Key: file.file.name,
    Body: file.file,
    onProgress(progressData) {
      console.log(JSON.stringify(progressData));
      up.value = (progressData.loaded / progressData.total).toFixed(2);
    },
    onFileFinish(err, data, options) {
      /* 非必须 */
      console.log(`${options.Key}上传${err ? '失败' : '完成'}`);
      selectBucket(selectedBucket.value, selectedRegion.value);
    },
  });
}
</script>
<style>
.el-dialog {
  background: transparent;
}

.el-drawer {
  background: transparent;
}

.el-dialog__title {
  padding: 10px;
  background: #fff;
}
</style>
<style scoped>
.notification {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
  width: 9vw;
  height: 6rem;
  margin: 5px;
  overflow: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 12px;
  background: #29292c;
  isolation: isolate;
  border-radius: 1rem;
}

.red {
  --gradient: linear-gradient(to bottom, #ff4d2e, #d82030, #ee091c);
  --color: #dd0b0b;
}

.redsvg {
  fill: #dd0b0b;
}

.blue {
  --gradient: linear-gradient(to bottom, #21a2ec, #1760cc, #0e1bda);
  --color: #21a2ec;
}

.bluesvg {
  fill: #21a2ec;
}

.zi {
  --gradient: linear-gradient(to bottom, #9536ee, #d519db, #6c05e2);
  --color: #9536ee;
}

.zisvg {
  fill: #9536ee;
}

.green {
  --gradient: linear-gradient(to bottom, #6af0ad, #19db70, #05e247);
  --color: #6af0ad;
}

.greensvg {
  fill: #6af0ad;
}

.yellow {
  --gradient: linear-gradient(to bottom, #f0ee6a, #acaf0c, #e2ae05);
  --color: #f0ee6a;
}

.yellowsvg {
  fill: #f0ee6a;
}

.notification::before {
  position: absolute;
  inset: 0.0625rem;
  z-index: 2;
  content: '';
  background: #18181b;
  border-radius: 0.9375rem;
}

.notification::after {
  position: absolute;
  inset: 0.65rem auto 0.65rem 0.5rem;
  z-index: 4;
  width: 0.25rem;
  content: '';
  background: var(--gradient);
  border-radius: 0.125rem;
  transition: transform 300ms ease;
}

.notification:hover::after {
  transform: translateX(0.15rem);
}

.notititle {
  z-index: 5;
  padding: 0.65rem 0.25rem 0.4rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color);
  transition: transform 300ms ease;
}

.notification:hover .notititle {
  transform: translateX(0.15rem);
}

.notibody {
  z-index: 5;
  padding: 0 1.25rem;
  color: #99999d;
  transition: transform 300ms ease;
}

.notification:hover .notibody {
  transform: translateX(0.25rem);
}

.notiglow,
.notiborderglow {
  position: absolute;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle closest-side at center, white, transparent);
  opacity: 0;
  transition: opacity 300ms ease;
  transform: translate(-50%, -50%);
}

.notiglow {
  z-index: 3;
}

.notiborderglow {
  z-index: 1;
}

.notification:hover .notiglow {
  opacity: 0.1;
}

.notification:hover .notiborderglow {
  opacity: 0.1;
}

.note {
  position: fixed;
  top: 80%;
  left: 50%;
  width: 75%;
  font-size: 0.9rem;
  color: var(--color);
  text-align: center;
  transform: translateX(-50%);
}

.card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  background-color: #212121;
  border: 5px solid #222;
  border-radius: 8px;
  box-shadow: rgb(0 0 0 / 19%) 0 10px 20px, rgb(0 0 0 / 23%) 0 6px 6px, inset rgb(0 0 0 / 19%) 0 10px 20px,
    inset rgb(0 0 0 / 23%) 0 6px 6px;
  transition: all ease-in-out 0.3s;
}

.card-title {
  margin: 0;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  cursor: default;
}

.card-des {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  word-break: break-all;
  cursor: default;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.card-text {
  position: absolute;
  right: 20px;
  bottom: 5px;
  display: flex;
  gap: 3px;
  align-items: center;
  margin: 0;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  animation: textanimate 0.8s alternate infinite;
}

.card:hover > .card-text {
  opacity: 1;
}

@keyframes textanimate {
  0% {
    right: 20px;
  }

  100% {
    right: 10px;
  }
}

.arrow-icon {
  font-size: 15px;
  font-weight: 500;
}

/* 样式定义 */
.radio-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  margin: 0 auto;
  user-select: none;
}

.radio-inputs > * {
  margin: 6px;
}

.radio-input:checked + .radio-tile {
  color: #dd0b0b;
  border-color: #dd0b0b;
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}

.radio-input:checked + .radio-tile::before {
  background-color: #dd0b0b;
  border-color: #dd0b0b;
  opacity: 1;
  transform: scale(1);
}

.radio-input:checked + .radio-tile .radio-icon svg {
  fill: #dd0b0b;
}

.radio-input:checked + .radio-tile .radio-label {
  color: #fff;
  background-color: #dd0b0b;
}

.radio-input:focus + .radio-tile {
  border-color: #dd0b0b;
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%), 0 0 0 4px #b5c9fc;
}

.radio-input:focus + .radio-tile::before {
  opacity: 1;
  transform: scale(1);
}

.radio-input:focus + .radio-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #dd0b0b;
}

.radio-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  font-weight: 800;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 0.5rem;
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
  transition: 0.15s ease;
}

.radio-tile::before {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  content: '';
  background-color: #dd0b0b;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transition: 0.25s ease;
  transform: scale(0);
}

.radio-tile:hover {
  border-color: #dd0b0b;
}

.radio-tile:hover::before {
  opacity: 1;
  transform: scale(1);
}

.radio-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #fff;
}

.radio-label {
  margin-top: 6px;
  font-size: 13px;
  color: #000;
  text-align: center;
  background-color: #fff;
  transition: 0.375s ease;
}

.radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

.radio2-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  font-weight: 800;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #3883e6;
  border-radius: 0.5rem;
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
  transition: 0.15s ease;
}

.radio2-tile::before {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  content: '';
  background-color: #3883e6;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transition: 0.25s ease;
  transform: scale(0);
}

.radio2-tile:hover {
  border-color: #3883e6;
}

.radio2-tile:hover::before {
  opacity: 1;
  transform: scale(1);
}

.radio2-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #fff;
}

.radio2-label {
  margin-top: 6px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  background-color: #3883e6;
  transition: 0.375s ease;
}

.radio2-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

.radio3-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  font-weight: 800;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #059469;
  border-radius: 0.5rem;
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
  transition: 0.15s ease;
}

.radio3-tile::before {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  content: '';
  background-color: #059469;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transition: 0.25s ease;
  transform: scale(0);
}

.radio3tile:hover {
  border-color: #059469;
}

.radio3-tile:hover::before {
  opacity: 1;
  transform: scale(1);
}

.radio3-icon svg {
  width: 2rem;
  height: 2rem;
  fill: #fff;
}

.radio3-label {
  margin-top: 6px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  background-color: #059469;
  transition: 0.375s ease;
}

.radio3-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}
</style>
